<template>
    <el-drawer v-model="showDrawer" 
    :title="title" 
    :size="size"
    :close-on-click-modal = "false"
    :destroy-on-close = "destroyOnClose">

  <div class="formDrawer">
    <div class="body">  
      <slot></slot>
    </div>
    <div class="actions">
        <el-button  type="primary" @click="submit" :loading="loading">{{confirmText}}</el-button>
        <el-button  type="primary" @click="close">取消</el-button>
    </div>
  </div>

  </el-drawer>
</template>

<script setup> 
import {ref} from "vue"

 const showDrawer = ref(false)

//将属性暴露出去，方便后续动态变化
 const props = defineProps({
  title:String,
  size:{
    type:String,
    default:"45%"
  },
     destroyOnClose:{//销毁子组件的功能，关闭组件，里面的内容重新生成
      type:Boolean,
      default:false
     },
     confirmText:{
      type:String,
      default:"提交"
     }
 })

//  loading = true--按钮显示加载中
 const loading = ref(false)
 const showloading = () => loading.value = true
 const hideloading = () => loading.value = false


 //打开
 const open = ()=>showDrawer.value = true

 //关闭
 const close = ()=>showDrawer.value = false

 //提交--将表单数据交给父组件
 const emit = defineEmits(['submit'])
 const submit = ()=>emit("submit")


  //向父组件暴露以下方法
 defineExpose({
  open,
  close,
  showloading,
  hideloading
 })
</script>

<style>
.formDrawer {
  width: 100%;
  height:100%;
  position: relative;
  @apply flex flex-col;
}

.formDrawer .body{
  flex: 1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 50px;
  overflow-y: auto;
}

.formDrawer .actions {
  height: 50px;
  @apply mt-auto flex items-center
}
</style>